<?php
/**
 * 统计页面
 * @author liuzilu <fotomxq@gmail.com>
 * @version 1
 * @package stock
 */
//引用全局
require('glob.php');
//当前所属页面名称
$nowPageName = 'count';
?>

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>统计 - <?php echo $webData['WEB-TITLE']; ?></title>
        <link rel="shortcut icon" href="../assets/imgs/logo.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="../assets/imgs/logo.png">
        <link rel="stylesheet" href="../assets/css/uikit.min.css">
        <link rel="stylesheet" href="../assets/css/components/notify.min.css">
        <link rel="stylesheet" href="assets/css/glob.css">
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

        <?php require('page-menu.php'); ?>

            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>股票</h2>
                    <p>根据收益情况和计划、目标呈现数据表和数据图。</p>
                </div>
            </div>
            
            <hr>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>收益和计划 (日)</h2>
                    <canvas id="stockDChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>收益和计划 (月)</h2>
                    <canvas id="stockMChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>收益和计划 (年)</h2>
                    <canvas id="stockYChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>交易次数和持仓数</h2>
                    <canvas id="stockJChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>计划变动次数</h2>
                    <canvas id="stockBChart" width="900" height="200"></canvas>
                </div>
            </div>
            
            <div class="uk-grid" data-uk-grid-margin>
                <div class="uk-width-1-1">
                    <h2>实际和目标偏离值</h2>
                    <canvas id="stockPChart" width="900" height="200"></canvas>
                </div>
            </div>

        </div>

        <script src="../assets/js/jquery.min.js"></script>
        <script src="../assets/js/uikit.min.js"></script>
        <script src="../assets/js/components/notify.min.js"></script>
        <script src="../assets/js/chart.min.js"></script>
        <script>
            //初始化生成数据表
            function funcChart(canvasID,labels,data,labelValue){
                $(canvasID).width($(canvasID).parent().width());
                var chartdata = {
                    labels: labels,
                    datasets: data
                }
                var chartx = $(canvasID).get(0).getContext("2d");
                var stockChart = new Chart(chartx);
                new Chart(chartx).Line(chartdata, {
                    bezierCurve: false,
                    scaleShowLabels: true,
                    scaleLabel:'<%=value%>'+labelValue
                });
            }
            //返回特定数据组
            function funcChartData(type,data){
                if(type==='gray'){
                    return {
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                data: data
                            };
                }else if(type==='red'){
                    return {
                                fillColor: "rgba(255,153,153,0.5)",
                                strokeColor: "rgba((255,153,153,1)",
                                pointColor: "rgba((255,153,153,1)",
                                pointStrokeColor: "#fff",
                                data: data
                            };
                }else if(type==='blue'){
                    return {
                                fillColor: "rgba(11,159,201,0.5)",
                                strokeColor: "rgba(11,159,201,1)",
                                pointColor: "rgba(11,159,201,1)",
                                pointStrokeColor: "#fff",
                                data: data
                            };
                }
            }
            //初始化
            $(function () {
                //日统计表设定
                var labelsD = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var dataD = [65, 59, 22, 56, 55];
                var dataDTarget = [28, 48, 40, 19, 21, 27];
                funcChart('#stockDChart',labelsD,[funcChartData('blue',dataD),funcChartData('red',dataDTarget)],'元');
                //月统计表设定
                var labelsM = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var dataM = [65, 59, 22, 56, 55];
                var dataMTarget = [28, 48, 40, 19, 21, 27];
                funcChart('#stockMChart',labelsM,[funcChartData('blue',dataM),funcChartData('red',dataMTarget)],'元');
                //年统计表设定
                var labelsY = ["2014","2015","2016"];
                var dataY = [65, 59, 22];
                var dataYTarget = [28, 48, 40];
                funcChart('#stockYChart',labelsY,[funcChartData('blue',dataY),funcChartData('red',dataYTarget)],'元');
                //交易次数统计
                var labelsJ = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var dataJ = [2, 4, 7, 2];
                var dataJTarget = [2, 3, 2];
                funcChart('#stockJChart',labelsJ,[funcChartData('blue',dataJ),funcChartData('red',dataJTarget)],'个');
                //计划变动次数
                var labelsB = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var dataB = [2, 4, 7, 2];
                funcChart('#stockBChart',labelsB,[funcChartData('blue',dataB)],'');
                //实际和目标偏离值
                var labelsP = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                var dataP = [2, 4, 7, 2];
                funcChart('#stockPChart',labelsP,[funcChartData('blue',dataP)],'%');
            });
        </script>

    </body>
</html>